/* CSS Document */

 

body {
	background: #BFBFBF;
	font-size:22px;
  color:rgba(0,0,0,0);
	line-height: 32px;
	word-wrap:break-word !important;
	font-family: 'Open Sans', sans-serif;
	min-width: 960px;
	min-width: 960px;
	margin: 0;
	}
#clearfix{
	margin-left: 40px;
}

#h3ti{
	margin-top: 6px;
	font-size: 30px;
}

#h2ti{
	font-size: 30px;
    margin-bottom: 20px
}

#titulosec{
	    width: 270px;
    height: 54px;
    margin: 0 auto;
    background: rgba(110, 3, 3, 0.97);
    text-align: center;
    padding-top: 1px;
    border-top-left-radius: 0em;
    border-top-right-radius: 0em;
    border-bottom-right-radius: 1.5em;
    border-bottom-left-radius: 1.5em;
    border-top: solid 5px #bdbfc0;
}
 #inicioconte{
   margin-top: 0px;
        margin:-91px auto;
    width: 960px;
    max-width: 960px;
    min-width: 1000px;
    /* margin-right: 16%; */
    /* margin-left: 16%; */
    padding-top: 17px;
    padding-left: 17px;
    padding-right: 17px;
    padding-bottom: 17px;
    background: rgba(189, 191, 192, 0.57);
    border-bottom-right-radius: 17px;
    border-bottom-left-radius: 17px;
    border-top-right-radius: 17px;
    border-top-left-radius: 17px;
}




#inicioconte2{
   
       width: 1200px;position: relative;
       overflow: hidden;
    max-width: 1200px;
    min-width: 1000px;
     
}




#imgprin{
	       height: 397px;
    width: 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-attachment: fixed !important;
    background-size: 100% 398px;
    -moz-background-size: 100%, auto !important;
    /* -webkit-background-size: 100%, auto !important; */
    /* background-size: 100% 450px !important; */
     animation: transitionImage 30s infinite;
                -webkit-animation: transitionImage 30s infinite;
                -moz-animation: transitionImage 30s infinite;
}



  #imgprin3{
       height: 200px;
    background-image: url('../img/a6.jpg');
    background-attachment: fixed !important;
    -o-background-size: 100% 100%, auto !important;
    -moz-background-size: 100%, auto !important;
    -webkit-background-size: 100%, auto!important;
    background-size: 100% 500px !important;
    /* border-radius: 10px !important; */
    box-shadow: 0 0 15px #ddd !important;
    min-width: 960px !important;
    margin-top: 8.3%;
     animation: transitionImage 30s infinite;
                -webkit-animation: transitionImage 30s infinite;
                -moz-animation: transitionImage 30s infinite;
  }

  #imgprin2{
  height: 500px;
  background-image: url('../img/int1-3.jpg');
  background-repeat: no-repeat; background-attachment:fixed !important;
  -o-background-size: 100% 100%, auto !important;
  -moz-background-size:100%, auto !important;
  -webkit-background-size: 100%, auto !important;
  background-size: 100% 500px !important;
  border-radius: 10px !important;
  box-shadow: 0 0 15px #ddd !important;
  min-width: 960px !important;
   animation: transitionImage 30s infinite;
                -webkit-animation: transitionImage 30s infinite;
                -moz-animation: transitionImage 30s infinite;
  }

#img1 {
  background-image: url("img/tunel/1.jpg");
  background-repeat: no-repeat;
  width: auto; /*or your image's width*/
  height: auto; /*or your image's height*/
  margin: 0;
  padding: 0;
  }

#img2 {
  background-image: url("img/tunel/2.jpg");
  background-repeat: no-repeat;
  width: auto; /*or your image's width*/
  height: auto; /*or your image's height*/
  margin: 0;
  padding: 0;
  }

#img3 {
  background-image: url("img/tunel/3.jpg");
  background-repeat: no-repeat;
  width: auto; /*or your image's width*/
  height: auto; /*or your image's height*/
  margin: 0;
  padding: 0;
  }

#img4 {
  background-image: url("img/tunel/4.jpg");
  background-repeat: no-repeat;
  width: auto; /*or your image's width*/
  height: auto; /*or your image's height*/
  margin: 0;
  padding: 0;
  }

#img5 {
  background-image: url("img/tunel/5.jpg");
  background-repeat: no-repeat;
  width: auto; /*or your image's width*/
  height: auto; /*or your image's height*/
  margin: 0;
  padding: 0;
  }

 

h1 {
	font-size: 60px;
	text-align: center;
	color: #FFF;
}	

h3 {
	font-size: 30px;
	text-align: center;
	color: #FFF;
}

h3 a {
	color: #FFF;
}

a {
	color: #FFF;
}

h1 {
	margin-top: 100px;
	text-align:center;
	font-size:60px;
	font-family: 'Bree Serif', 'serif';
	}

#container {
	margin: 0 auto;
	max-width: 1037px;
      margin-top: -0.1%;
}

p {
	text-align: center;
	text-align: justify;
}


/* Giving a background-color to the nav container. */
nav { 
	margin: 0;
	margin-top: -8px;
	            background-color: #f5f8fa;
	border-top-left-radius:0em;
    border-top-right-radius:0em;
    border-bottom-right-radius:1.5em;
    border-bottom-left-radius:1.5em;
    min-width: 960px;

}

/* Since we'll have the "ul li" "float:left"
 * we need to add a clear after the container. */

nav:after {
	content:"";
	display:table;
	clear:both;
}

/* Removing padding, margin and "list-style" from the "ul",
 * and adding "position:reltive" */
nav ul {
	padding:0;
	margin:0;
	list-style: none;
	position: relative;
	}
	
/* Positioning the navigation items inline */
nav ul li {
    margin: 0px;
        width: 135px;
    display: inline-block;
    text-align: center;
    float: left;
        
         
	}

/* Styling the links */
nav a {
	display:block;
	/*padding:0 10px;*/
	color: #000;
	font-size: 15px;
	line-height: 60px;
	text-decoration:none;
}


nav ul li ul li:hover { background: #5D5D5D;
}

/* Background color change on Hover */
nav a:hover { 
	background-color: rgba(189, 191, 192, 0.93); 
}

/* Hide Dropdowns by Default
 * and giving it a position of absolute */
nav ul ul {
	display: none;
	position: absolute; 
	top: 100%; 
}
	
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
	display:inherit;
}
	
/* Fisrt Tier Dropdown */
nav ul ul li {
	/*min-width:170px;*/
	float:none;
	display:list-item;
	position: relative;
}

/* Second, Third and more Tiers	
 * We move the 2nd and 3rd etc tier dropdowns to the left
 * by the amount of the width of the first tier.
*/
nav ul ul ul {
	position: absolute;
	top:0;
	left:100%; 
}

	
/* Change ' +' in order to change the Dropdown symbol */
li > a:after {/* content:  ' +';*/ }
li > a:only-child:after { content: ''; }

#relatedContent {
  max-width: 800px;
  margin: 50px auto;
}

#relatedContent .item {
  max-width: 44%;
  padding: 3%;
  float: left;
  text-align: center;
}

#relatedContent .item a img {
  max-width: 100%;
}		



      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      @import url(http://fonts.googleapis.com/css?family=Roboto);
html, body {
  height: 100%;
}

 

 

#pp ul li {
  display: inline-block;
}

#pp ul li a {
  padding: 20px;
  font-family: "Roboto";
  color: rgba(0, 0, 0, 0.69);
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.4);
  font-size: 19px;
  text-decoration: none;
  display: block;
}

#pp ul li a:hover {
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.43), inset 0 0 1px rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.1);
  color: rgba(0, 0, 0, 0.7);
}

/* Demo credits stuff */
@import url(http://fonts.googleapis.com/css?family=Nixie+One);
h1#author {
  position: fixed;
  bottom: 50px;
  text-align: center;
  color: #30303f;
  width: 100%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.2) 75%, rgba(255, 255, 255, 0) 100%);
  padding: 10px 0;
  font-family: "Nixie One";
  text-stroke: 1px;
  font-size: 30px;
  text-shadow: 0 0 10px #aaaaaa;
  font-family: "Roboto"
}
h1#author a {
  color: #3399dd;
  text-decoration: none;
}



      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      @import url(http://fonts.googleapis.com/css?family=Roboto);
html, body {
  height: 100%;
}

#pp {
      max-width: 1040px;
    -webkit-mask-image: linear-gradient(171deg, rgba(255, 255, 255, 0) 0%, #ffffff 0%, #ffffff 100%, rgba(255, 255, 255, 0) 100%);
    margin: 0 auto;
        overflow: hidden;
}

#pp ul {
          text-align: center;
    background: linear-gradient(90deg, rgb(106, 64, 39) 0%, #714931 25%, #6f472e 75%, #6c432a 100%);
    width: 100%;
    box-shadow: 0 0 25px rgb(22, 9, 9), inset 0 0 1px #704830;
}

#pp ul li {
  display: inline-block;
}

#pp ul li a {
  padding: 20px;
  font-family: "Roboto";
      color: rgb(255, 255, 255);
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.4);
  font-size: 17px;
  text-decoration: none;
  display: block;
      font-family: Roboto,Arial,Helvetica,sans-serif;
}

#pp ul li a:hover {
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.43), inset 0 0 1px rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.1);
  color: rgba(0, 0, 0, 0.7);
}

 
 
h1#author {
  position: fixed;
  bottom: 50px;
  text-align: center;
  color: #30303f;
  width: 100%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.2) 75%, rgba(255, 255, 255, 0) 100%);
  padding: 10px 0;
  font-family: "Nixie One";
  text-stroke: 1px;
  font-size: 30px;
  text-shadow: 0 0 10px #aaaaaa;
  font-family: "Roboto"
}
h1#author a {
  color: #3399dd;
  text-decoration: none;
}

a.back{
                background:transparent url(back.png) no-repeat top left;
                position:fixed;
                width:150px;
                height:27px;
                outline:none;
                bottom:0px;
                left:0px;
            }
            #content{
                margin:150px auto 10px auto;
            }
            .reference{
                clear:both;
                width:800px;
                margin:30px auto;
            }
            .reference p a{
                text-transform:uppercase;
                text-shadow:1px 1px 1px #fff;
                color:#666;
                text-decoration:none;
                font-size:10px;
            }
            .reference p a:hover{
                color:#333;
            }



            .rotator{
    background-color:#222;
       width: 99%;
    height: 422px;
    margin:0px auto;
    position:relative;
    font-family:'Myriad Pro',Arial,Helvetica,sans-serif;
    color:#fff;
    text-transform:uppercase;
    letter-spacing:-1px;
    border:3px solid #f0f0f0;
    overflow:hidden;
    -moz-box-shadow:0px 0px 10px #222;
    -webkit-box-shadow:0px 0px 10px #222;
    box-shadow:0px 0px 10px #222;
}
img.bg{
    /*position:absolute;*/
    top:0px;
    left:0px;
}
.rotator ul{
    list-style:none;
    position:absolute;
    right:0px;
    top:0px;
    margin-top:6px;
    z-index:999999;
     
}
.rotator ul li{
    display:block;
    float:left;
    clear:both;
    width:260px;
}
.rotator ul li a{
    width:65px;
    float:right;
    clear:both;
    padding-left:10px;
    text-decoration:none;
    display:block;
    height:39px;
    line-height:52px;
    background-color:rgba(152, 122, 105, 0.41);
    margin:1px -20px 1px 0px;
    opacity:0.7;
    color:#f0f0f0;
    font-size:20px;
    border:2px solid #000;
    border-right:none;
    outline:none;
    text-shadow:-1px 1px 1px #000;
    -moz-border-radius:10px 0px 0px 20px;
    -webkit-border-top-left-radius:10px;
    -webkit-border-bottom-left-radius:20px;
    border-top-left-radius:10px;
    border-bottom-left-radius:20px;
}
.rotator ul li a:hover{
      text-shadow:0px 0px 2px #fff;
}
.rotator .heading{
    position:absolute;
    top:0px;
    left:0px;
    width:500px;
  background:   rgba(152, 122, 105, 0.78);
  -moz-border-radius:0px 10px 0px 0px;
    -webkit-border-bottom-right-radius:10px;
    border-bottom-right-radius:10px;
    display: none;
}
.rotator .heading h1{
    text-shadow:-1px 1px 1px #555;
    font-weight:normal;
    font-size:19px;
    padding:20px;
}
.rotator .description{
    width:100%;
    height:120px;
    position:absolute;
    bottom:0px;
    left:0px;
    padding:10px;
    background-color:rgba(152, 122, 105, 0.78);
    -moz-border-radius:0px 10px 0px 0px;
    -webkit-border-top-right-radius:10px;
    border-top-right-radius:10px;
    opacity:0.7;
    border-top:2px solid #fff;
    border-right:2px solid #fff;
    font-size: 12px;
}
.rotator .description p{
    text-shadow:-1px 1px 1px #000;
    text-transform:none;
    letter-spacing:normal;
    line-height:26px;
}
a.more{
    color:orange;
    text-decoration:none;
    text-transform:uppercase;
    font-size:10px;
}
a.more:hover{
    color:#fff;
}

div a img.ay:hover{
  opacity: .5;



}


.tabla {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
text-align: right;
width: 50%;
float: left;

}
.tabla th {
padding: 5px;
font-size: 11px;
 
 
background-repeat: repeat-x;
color: #FFFFFF;
border-right-width: 1px;
border-bottom-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-right-color: #fff;
border-bottom-color: #fff;
font-family: "Trebuchet MS", Arial;
text-transform: uppercase;
text-align: center;
}
.tabla .modo1 {
font-size: 12px;
font-weight:bold;
background-color: #fff;
 
background-repeat: repeat-x;
color: #34484E;
font-family: "Trebuchet MS", Arial;
}
.tabla .modo1 td {
padding: 5px;
border-right-width: 1px;
border-bottom-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-right-color: #A4C4D0;
border-bottom-color: #A4C4D0;
    text-align: center;
}


.tabla .modo2 {
font-size: 12px;
font-weight:bold;
background-color: #fdfdf1;
background-image: url(fondo_tr02.png);
background-repeat: repeat-x;
color: #990000;
font-family: "Trebuchet MS", Arial;
text-align:left;
}
.tabla .modo2 td {
padding: 5px;
border-right-width: 1px;
border-bottom-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-right-color: #EBE9BC;
border-bottom-color: #EBE9BC;
}
.tabla .modo2 th {
background-image: url(fondo_tr02a.png);
background-position: left top;
font-size: 12px;
font-weight:bold;
background-color: #fdfdf1;
background-repeat: repeat-x;
color: #990000;
font-family: "Trebuchet MS", Arial;
text-align:left;
border-right-width: 1px;
border-bottom-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-right-color: #EBE9BC;
border-bottom-color: #EBE9BC;
}




 
.container2{
    width: 100%;
    height: 400px;
    /* margin: 100px auto 0px auto; */
    /* border: 10px solid #333; */
    -moz-box-shadow: 1px 1px 12px #000;
    /* -webkit-box-shadow: 1px 1px 12px #000; */
    /* box-shadow: 1px 1px 12px #000; */
}
a.back{
    width:184px;
    height:32px;
    position:absolute;
    bottom:10px;
    left:10px;
    background:transparent url(../back.png) no-repeat top left;
}
.wrap2{
   width: 49.5%;
        height: 167px;
    margin: 0px;
    overflow: hidden;
    position: relative;
    float: left;
}
.wrap2 a img  {
    border:none;
    position:absolute;   
    top:-66.5px;
    left:-150px;
    height:500px;
    opacity: 0.5;
    -moz-opacity: 0.5;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
}



.searchform {

display: inline-block;

zoom: 1; /* ie7 hack para display:inline-block */

*display: inline;

border: solid 1px #d2d2d2;

padding: 3px 5px;

-webkit-border-radius: 2em;

-moz-border-radius: 2em;

border-radius: 2em;

-webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);

-moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);

box-shadow: 0 1px 0px rgba(0,0,0,.1);

background: #f1f1f1;

background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));

background: -moz-linear-gradient(top,  #fff,  #ededed);

filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie7 */

-ms-filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie8 */

}

.searchform input {

font: normal 12px/100% Arial, Helvetica, sans-serif;

}

.searchform .searchfield {

background: #fff;

padding: 6px 6px 6px 8px;

width: 202px;

border: solid 1px #bcbbbb;

outline: none;

-webkit-border-radius: 2em;

-moz-border-radius: 2em;

border-radius: 2em;

-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);

-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);

box-shadow: inset 0 1px 2px rgba(0,0,0,.2);

}

.searchform .searchbutton {

color: #fff;
    border: solid 1px #987b6a;
    font-size: 11px;
    height: 27px;
    width: 27px;
    text-shadow: 0 1px 1px rgb(152, 123, 106);
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
    background: #987b6a;
    background: -webkit-gradient(linear, left top, left bottom, from(#987b6a), to(#987b6a));
    background: -moz-linear-gradient(top, #9e9e9e, #454545);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545');
    -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545');
}



.contador{


     float: left;
    text-align: center;
    padding: 10px;
       width: 13.5%;
    height: 522px;
    height: auto;
    position: relative;
    float: left;
    margin-top: 83px;
    background-image: url(martin.png);
    padding: 33px;
    margin-left: 40%;
    height: 95px;
    margin-top: -1%;
}

 
 #slider { 
position: relative;
overflow: hidden;
width: 500px; 
height: 300px; 
 
margin: 0 auto;
padding: 0;
}

#slider > div {
position:absolute;
top:0;
left:0;
}
#slider img {
width:100%;
min-height:300px;
margin:0;
padding:0; 
border:0;
}

#slider p {
position: absolute;
bottom: 30px;
left: 0;
display: block;
width: 100%;
height: 24px;
margin:0;
padding: 5px 0;
color: #eee;
background: #990000;
font-size: 22px;
line-height:22px;
text-align:center;

}


.paginas{


  border: solid 3px #987b6a;text-align: center;padding: 10px;width: 98%;height: auto;position: relative;float: left;margin-top: 20px;background-color: white;
}


.partidos-pol{

  color:rgba(0,0,0,0);margin-left: -.5%;position: relative;width: 100%;float: left;padding: 7px;       margin-top: -2.1%; 
}

.tit-partidos{
  overflow: hidden;color: #fff;    background: #b24634;position: relative;width: 97%;padding: 13px;top: 24px; text-align: center;font-size: 28px;
}

.img-art-69{

  width: 100%;height: 310px;
}

.img-art-65{

width: 100%;height: 310px;
}


.div-art-69{
  background: #fff;width: 98.2%;float: left;padding: 17px;margin-top: 7.9%;margin-left: -1.5%;
}


.div-art-69-general{
  position: relative;width: 48%;float: left;padding: 7px;       margin-top: -2.1%; 
}

.div-art-65{
background: #fff;
    width: 96%;
    float: left;
    padding: 17px;
    margin-top: 31px;
    margin-left: -1.2%;

}
.div-art-65-general{
  margin-left: -.1%;position: relative;width: 48%;float: left;padding: 7px;margin-top: -1.4%;
}


.tit-transparencia{

  overflow: hidden;color: #fff;    background: #b24634;position: relative;width: 96%;padding: 13px;top: 24px; text-align: center;font-size: 28px;    border: double 6px;
}

.redes-marque{
  height: 34px;float: left;color: #987b6a;width: 55%;font-size: 31px;margin-top: 3%;
}

.div-redes{
  /*   top: 16px;background: #f5f8fa;width: 98.5%;position: relative;text-align: right;overflow: hidden;padding: 6px;
*/
    top: 8px;
    background: #ffffff;
    width: 98.8%;
    position: relative;
    text-align: right;
    overflow: hidden;
    padding: 6px;
    border: solid 3px #987b6a;

}

.temas-de-interes{

  width: 97.5%;background: #fff;margin-top: 2%;padding: 12px;
}
.div-temas-de-interes{
 overflow: hidden;color: #fff;    background: #b24634;position: relative;width: 96%;padding: 13px;top: 24px; text-align: center;font-size: 28px;    border: double 6px; 
}


.resultado{
  color: #987b6a;border: solid 3px;padding: 8px;width: 95%;height: 182px;background-image:url('estadistic-2015.jpg');    font-weight: 900;
}

.encuestas-2016{
     height: 324px;background: #fff;width: 28.8%;position: relative;text-align: right;overflow: hidden;padding: 16px;right: -19px;
}

.tit-encuestas{
  overflow: hidden;color: #fff;background: #b24634;position: relative;width: 29.3%;padding: 13px;MARGIN-TOP: 2%;text-align: center;font-size: 28px;left: 2%;
}

.cg-tit{
     overflow: hidden;color: #fff;background: #b24634;position: relative;width: 102.7%;padding: 13px;MARGIN-TOP: -3%;text-align: center;font-size: 28px; margin-left: -3%;
}
.cg-general{
  background:#fff;    height: 373px;overflow: hidden;position: relative;float: left;width:62.5%;padding: 18px;   margin-top: 21px;
}

.bus-iepc{

  border-top-right-radius: 17px;border-top-left-radius: 17px;top: 16px;background: #f5f8fa;width: 97.5%;position: relative;text-align: right;overflow: hidden;padding: 12px;height: 33px;
}


/*Ejemplo 5*/
.contenedor-img {
         width: 24%;
    height: 229px;
    float: left;
    overflow: hidden;
    position: relative;
    text-align: center;
    cursor: default;
    background: #fff;
    margin: 3px;
}
.ejemplo-5 img {
transform: scaleY(1);
transition: all 0.7s ease-in-out;

}
.ejemplo-5 .mascara {
        background-color: rgb(151, 122, 105);
    transition: all 0.5s linear;
    opacity: 0;
    width: 90%;
    height: 208px;
    padding: 15px;
    border: solid 2px #f5f8fa;
}
.ejemplo-5 h2{
border-bottom: 1px solid rgba(255, 255, 255, 0.6);
background: transparent;
margin: 20px 40px 0px 40px;
transform: scale(0);
color: #fff;
transition: all 0.5s linear;
opacity: 0;
overflow: hidden;
position: relative;
width: 100%;

}
}
.ejemplo-5 p {
color: #fff;
opacity: 0;
transform: scale(0);
transition: all 0.5s linear;
overflow: hidden;
position: relative;
}
}
.ejemplo-5 a.link {
opacity: 0;
transform: scale(0);
transition: all 0.5s linear;
background-color: rgba(119, 80, 21, 0.9);
overflow: hidden;
position: relative;
}
}

.ejemplo-5:hover img {
transform: scale(10);
opacity: 0;

}
.ejemplo-5:hover .mascara {
opacity: 1;
margin-top: -92%;
overflow: hidden;
position: relative;
}

.ejemplo-5 .mascara2 {
        background-color: rgb(151, 122, 105);
    transition: all 0.5s linear;
    opacity: 0;
    width: 90%;
    height: 208px;
    padding: 15px;
    border: solid 2px #f5f8fa;
}


.ejemplo-5:hover .mascara2 {
opacity: 1;
margin-top: -72%;
overflow: hidden;
position: relative;
}

.classname {
    /* border: solid 1px #2d2d2d; */
    /* text-align: center; */
    /* background: #575757; */
    /* padding: 100px 50px 100px 50px; */
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

 
.classname {transition:All 1.5927s ease;-webkit-transition:All 1.5927s ease;-moz-transition:All 1.5927s ease;-o-transition:All 1.5927s ease;transform:  rotate(0deg) scale(0.998) skew(-1deg) translate(0px); -webkit-transform:  rotate(0deg) scale(0.998) skew(-1deg) translate(0px);-moz-transform:  rotate(0deg) scale(0.998) skew(-1deg) translate(0px);-o-transform:  rotate(0deg) scale(0.998) skew(-1deg) translate(0px);-ms-transform:  rotate(0deg) scale(0.998) skew(-1deg) translate(0px);}.classname:hover{transform:  rotate(0deg) scale(1.5) skew(-1deg) translate(0px);-webkit-transform:  rotate(0deg) scale(1.5) skew(-1deg) translate(0px);-moz-transform:  rotate(0deg) scale(1.5) skew(-1deg) translate(0px);-o-transform:  rotate(0deg) scale(1.5) skew(-1deg) translate(0px);-ms-transform:  rotate(0deg) scale(1.5) skew(-1deg) translate(0px);}
 
   .w{
   width: 10%;float:left;        
-webkit-transition:-webkit-transform .1s ease-out;
-moz-transition:-moz-transform .1s ease-out;
-o-transition:-o-transform .1s ease-out;
-ms-transition:-ms-transform .1s ease-out;
transition:transform .1s ease-out;
}
.w:hover{
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1)
}




   .x{
  width: 98.5%;border: double 6px #987b6a;   

-webkit-transition:-webkit-transform .1s ease-out;
-moz-transition:-moz-transform .1s ease-out;
-o-transition:-o-transform .1s ease-out;
-ms-transition:-ms-transform .1s ease-out;
transition:transform .1s ease-out;
}
.x:hover{
   opacity: .5; 
-moz-transform: scale(.95);
-webkit-transform: scale(.95);
-o-transform: scale(.95);
-ms-transform: scale(.95);
transform: scale(.95)
}



 .c{
      width: 69%;
    margin-top: 2%;
    float: left;     
-webkit-transition:-webkit-transform .1s ease-out;
-moz-transition:-moz-transform .1s ease-out;
-o-transition:-o-transform .1s ease-out;
-ms-transition:-ms-transform .1s ease-out;
transition:transform .1s ease-out;
}
.c:hover{
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1)
}



.o{
 width: 100%;
    height: 310px;
-webkit-transition:-webkit-transform .1s ease-out;
-moz-transition:-moz-transform .1s ease-out;
-o-transition:-o-transform .1s ease-out;
-ms-transition:-ms-transform .1s ease-out;
transition:transform .1s ease-out;
}
.o:hover{
  opacity: .7;
-moz-transform: scale(.93);
-webkit-transform: scale(.93);
-o-transform: scale(.93);
-ms-transform: scale(.93);
transform: scale(.93)

}